<template>
	<!-- <view>产品介绍</view> -->
	<view class="box">
		<!-- 轮播 -->
		<view class="banner">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="item in product.skuList" :key="item.id">
					<view class="swiper-item uni-bg-red">
						<image class="img" :src="item.pic" mode=""></image>
					</view>
			    </swiper-item>
			</swiper>
			<view class="collect" @tap="savecollect">
				<image v-if="!product.iscollect" src="../../../static/icons/collect.png" mode=""></image>
				<image v-else src="../../../static/icons/collect1-active.png" mode=""></image>
			</view>
		</view>
		<view class="title">
			<view class="title-t">
				<view class="price-l">￥<view>{{product.price}}</view>.00</view>
				<view class="price-r">没有促销使用原价</view>
			</view>
			<view class="title-c">{{product.name}}</view>
			<view class="title-b">{{product.description}}</view>
		</view>
		<view class="content">
			<view class="photo">
				<mp-html :content="product.detailMobileHtml" />
			</view>
		</view>
		<view class="nav">
			<view class="nav-l">
				<image src="../../../static/icons/kf.png" mode=""></image>
			</view>
			<view class="nav-r">
				<view class="add" @click="additem(1)">添加到购物车</view>
				<view class="buy" @click="buyitem(0)">立即购买</view>
			</view>
		</view>
		<view class="mask" v-show="masks">
			<view class="card">
				<view class="title">
					<view class="title-l">
						<image :src="product.pic"></image>
					</view>
					<view class="title-c">
						<view class="cname">
							{{product.description}}
						</view>
						<view class="nums">库存数量:</view>
					</view>
					<view class="title-r" @click="maskend">
						<image src="../../../static/icons/x.png" mode=""></image>
					</view>
				</view>
				<view class="choice">
					<view class="choice-t">
						商品选择
					</view>
					<view class="choice-b">
						<view class="choice-color" @tap="productSkuId(item.id)" v-for="item in skuList" :key="item.id" >
							<text  v-for="ele in item.spData"> {{ele.key}}: {{ele.value}}</text>
						</view>
					</view>
				</view>
				<view class="choice">
					<view class="choice-t">
						特色服务
					</view>
					<view class="choice-b">
						<view class="choice-color">
							{{product.note}}
						</view>
						<view class="choice-color">
							上门安装
						</view>
					</view>
				</view>
				<view class="num">
					<view class="num-l">购买数量</view>
					<view class="num-r">
						<view class="jian" @click="jian">-</view>
						<view class="numss"><input type="text" :value="num" /></view>
						<view class="jia" @click="jia">+</view>
					</view>
				</view>
				<view class="btn" @click="gopayment(product.id)">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mpHtml from '@/components/mp-html/mp-html';
	import {productDetail} from "../../../api/home/goods/index.js";
	import {addCart} from "../../../api/home/goods/car/index.js"
	export default {
		components: {
		   mpHtml
		 },
		data() {
			return {
				//商品详细信息
				product:{
					skuList:[],
				},
				//商品数量
				num:1,
				//商品选择id
				SkuId:"",
				//下面是轮播
				indicatorDots: true,
				autoplay:false,
				interval: 2000,
				duration: 500,
				//遮罩层
				masks:false,
				cars:0,
			};
		},
		computed:{
			skuList(){
				return this.product.skuList.map(ele=>{
					ele.spData=JSON.parse(ele.spData)
					return ele
				})
			}
		},
		methods:{
			//添加到购物车
			additem(r){
				console.log(r);//1
				this.cars=r;
				this.masks=true;
			},
			//立即购买
			buyitem(r){
				console.log(r);//0
				this.cars=r;
				this.masks=true;
			},
			//数量减少
			jian(){
				if(this.num==1){
					uni.showToast({
						title:"不能再减了"
					})
				}else{
					this.num--;
					// 重新再执行一遍
					// var obj={
					// 	  "productId": this.product.id,
					// 	  "productSkuId": this.SkuId,
					// 	  "quantity":this.num
					// 	}
					// addCart(obj).then(res=>{
					// 	console.log(res)
					// });
				}
			},
			jia(){
				this.num++;
				// // 重新再执行一遍
				// var obj={
				// 	  "productId": this.product.id,
				// 	  "productSkuId": this.SkuId,
				// 	  "quantity":this.num
				// 	}
				// addCart(obj).then(res=>{
				// 	console.log(res)
				// });
			},
			//跳转到支付页面
			gopayment(key){
				console.log(key)
				var obj={
					  "productId": this.product.id,
					  "productSkuId": this.SkuId,
					  "quantity":this.num
					}
				addCart(obj).then(res=>{
					console.log(res)
				});
				if(this.cars==0){
					//跳转到支付页面
					uni.navigateTo({
						// url:`./payment/payment?id=${key}`,
						url:"./payment/payment",
					})
				}else if(this.cars==1){
					uni.navigateTo({
						// url:`./payment/payment?id=${key}`,
						url:"../../mine/car/car",
					})
				}
			
			},
			productSkuId(key){
				console.log(key)
				this.SkuId=key;
			},
			//点击关闭遮罩层
			maskend(){
				this.masks=false;
			},
			//点击收藏
			savecollect(){
				var collectList=uni.getStorageSync("collectList");
				if(collectList.length>0){
					var item=collectList.find(ele=>ele.id==this.product.id);
					var index=collectList.findIndex(ele=>ele.id==this.product.id);
					if(item){
						collectList.splice(index,1);
						uni.setStorageSync("collectList",collectList);
						this.product.iscollect=false;
					}else{
						collectList.push(this.product);
						uni.setStorageSync("collectList",collectList);
						this.product.iscollect=true;
					}
				}else{
					var arr=[];
					arr.push(this.product);
					uni.setStorageSync("collectList",arr);
					this.product.iscollect=true;
				}
			}
		},
		onLoad(options){
			// console.log(options.id);
			//商品详细信息
			productDetail(options.id).then(res=>{
				console.log(res)
				var collectList=uni.getStorageSync("collectList");
				var item =collectList.find(ele=>ele.id==res.data.product.id);
				if(item){
					res.data.product.iscollect=true;
				}else{
					res.data.product.iscollect=false;
				}
				this.product=res.data.product;
				// console.log(this.product)
				uni.setNavigationBarTitle({
					title:res.data.product.brandName
				})
			})
		}
		
	}
</script>
<style  scoped>
.photo>>>img{
    width: 100%;
	height:auto;
}
</style>
<style lang="scss" scoped>
.box{
	width: 100%;
	background-color:#F1ECE7 ;
	.banner{
		width: 100%;
		height: 317px;
		position: relative;
		uni-swiper{
			width: 100%;
			height: 100%;
			uni-view{
				width: 100%;
				height: 100%;
				uni-image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.collect{
			position: absolute;
			width:50px;
			height: 50px;
			top:295px;
			right: 50px;
			background-color: #354e44;
			box-shadow: 0 16px 24px 0 rgba(70,70,70,.2);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius:50% ;
			image{
				width: 30px;
				height: 30px;
				
			}
		}
	}
	.title{
		padding: 35px;
		.title-t{
			display: flex;
			.price-l{
				font-size: 16px;
				line-height: 30px;
				color: #f2270c;
				display: flex;
				view{
					font-size: 30px;
				}
			}
			.price-r{
				    margin-right: 6px;
				    padding: 0 6px;
				    border: 1px solid #ff8373;
				    border-radius: 2.5px;
				    height: 15px;
				    font-size: 10px;
				    color: #fff;
				    background-color: #f2270c;
				    margin-left: 5px;
					margin-top: 10px;
			}
		}
		.title-c{
			width: 100%;
			color: #262626;
			overflow: hidden;
			font-size: 16px;
			font-weight: 700;
			margin-top: 10px;
		}
		.title-b{
			font-size: 12px;
			padding: 18px 0 0;
			line-height: 1.3;
			color: #666;
		}
	}
	.content{
		padding:34px;
		.photo{
			
		}
	}
	.nav{
		position: fixed;
		bottom: 0;
		left: 0;
		// padding: 0 30px;
		width: 100%;
		height:60px;
		z-index:666;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		.nav-l{
			margin-left: 30px;
			width:30px;
			height: 100%;
			display: flex;
			align-items: center;
			image{
				width: 100%;
				height: 30px;	
			}
		}
		.nav-r{
			margin-right: 30px;
			width:238px;
			height: 60px;
			display: flex;
			align-items: center;
			.add{
				width: 50%;
				height:40px;
				font-size: 15px;
				background-color: #e2e2e2;
				color: #8f8f94;
				line-height: 40px;
				text-align: center;
			}
			.buy{
				width: 50%;
				font-size: 15px;
				color: #fff;
				line-height: 40px;
				text-align: center;
				background-color: #354e44;
			}
		}
	}
	.mask{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,.5);
		z-index: 888;
		.card{
			    position: absolute;
			    left: 50%;
			    top: 114px;
			    margin-left: -157px;
			    width: 314px;
			    height: 463px;
			    background: #fff;
			    border-radius: 20px;
				
				.title{
					padding:0 25px;
					height: 80px;
					display: flex;
					justify-content: space-between;
					// background-color: #00ffff;
					.title-l{
						width: 40%;
						height: 100px;
						margin-top: -20px;
						border-radius:10px ;
						overflow: hidden;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.title-c{
						width:40%;
						height: 100%;
						margin-left: 10px;
						.cname{
							font-size: 14px;
							color: #3e3e3e;
							// margin-left: 142px;
							margin-top:28px;
							font-weight: 600;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.nums{
							font-size: 12px;
							color: #b0b0b0;
							margin-top: 3px;
							line-height: 16px;
							    // margin-left: 142px;
						}
					}
					.title-r{
						width: 15%;
						height: 100%;
						display: flex;
						justify-content:center;
						align-items: center;
						    // position: absolute;
						    // right: 31px;
						    // top: 31px;
						// width: 21px;
						// height: 21px;
						image{
						width: 21px;
						height: 21px;
						}
					}
				}
				.choice{
					margin: 14px 28px;
					padding: 0 4px;
					.choice-t{
						font-size: 14px;
						color: #3e3e3e;
						line-height: 20px;
						font-weight: 600;
					}
					.choice-b{
						height: 85px;
						width: 100%;
						.choice-color{
							width:100%;
							height: 30px;
							color: #3e3e3e;
							font-size: 13px;
							line-height: 30px;
							background: #f2f4f3;
							border-radius: 10px;
							padding: 5px;
							margin-top:5px;
						}
					}
				}
				.num{
					margin: 14px 28px;
					padding: 0 4px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.num-l{
						width: 30%;
						height: 30px;
						font-size: 14px;
						color: #3e3e3e;
						font-weight: 600;
						line-height: 30px;
					}
					.num-r{
						width: 50%;
						height: 30px;
						display: flex;
						justify-content:space-between;
						align-items: center;
						line-height: 30px;
						text-align: center;
						view{
							width:30px;
							height: 30px;
							border-radius:40px;	
							background: #f1ece7;
						}
						.numss{
							width:45px;
							height: 30px;
						}
					}
				}
				.btn{
					width: 104px;
					height: 40px;
					background: #354e44;
					border-radius: 14px;
					margin: 24px auto;
					color: #fff;
					font-size: 16px;
					text-align: center;
					line-height: 40px;
				}
		}
	}
}
</style>
